<script setup lang="ts">
import type { GetClinicScheduleRespVO } from '@/api/clinic-schedule';
import dayjs from 'dayjs';
import { ref } from 'vue';
import { ClinicScheduleApi } from '@/api/clinic-schedule';
import AuthBar from '@/components/authBar/index.vue';
import Empty from '@/components/empty/index.vue';
import { APPOINTMENT_SEARCH_TYPE, appointmentSearchTypeList } from '@/enums/registration.enums';
import { useRequest } from '@/hooks/useRequest';
import { isEmpty } from '@/utils/is.utils';
import { currRoute, withQueryString } from '@/utils/router.utils';
import Calendar from './components/calendar.vue';
import DoctorCard from './components/doctorCard.vue';
import Steps from './components/steps.vue';

const searchType = ref(APPOINTMENT_SEARCH_TYPE.TIME);

const searchDate = ref(dayjs());

function handleSelectDate() {
  getDoctorList();
}

function onSearchTypeChange(type: APPOINTMENT_SEARCH_TYPE) {
  searchType.value = type;
  getDoctorList();
}

function handleSelect(doctorItem: GetClinicScheduleRespVO) {
  uni.navigateTo({
    url: withQueryString('/pages/appointmentRegistration/doctorAppointment', {
      doctorId: doctorItem.doctorId,
      sectionId: query.sectionId as unknown as number,
      type: searchType.value,
      appointmentDate: (searchType.value === APPOINTMENT_SEARCH_TYPE.TIME
        ? searchDate.value
        : dayjs()).format('YYYY-MM-DD')
    })
  });
}

const { query } = currRoute();
const { data: doctorList, runAsync: getDoctorList } = useRequest(() => ClinicScheduleApi.getDoctorList({
  sectionId: query.sectionId as unknown as number,
  appointmentDate: (searchType.value === APPOINTMENT_SEARCH_TYPE.TIME
    ? searchDate.value
    : dayjs()).format('YYYY-MM-DD')
}), {
  manual: true,
  onBeforeRequest() {
    uni.showLoading({
      title: '加载中',
      mask: true
    });
  },
  onComplete() {
    uni.hideLoading();
  }
});
</script>

<template>
  <view class="doctor-list flex-col">
    <Steps :current="2" />
    <AuthBar />
    <view class="flex-1 overflow-auto px-48">
      <view class="flex items-center justify-between pb-26 pt-36">
        <!-- 挂号方式 -->
        <view class="search flex items-center">
          <view
            v-for="item in appointmentSearchTypeList.list"
            :key="item.value"
            class="search-type"
            :class="{ active: searchType === item.value }"
            @click="onSearchTypeChange(item.value)"
          >
            {{ item.label }}
          </view>
        </view>
        <view v-if="searchType === APPOINTMENT_SEARCH_TYPE.TIME" class="search-date">
          日期: {{ searchDate.format('YYYY-MM-DD') }}
        </view>
      </view>

      <!-- 日历 -->
      <view v-if="searchType === APPOINTMENT_SEARCH_TYPE.TIME" class="pb-30">
        <Calendar v-model:value="searchDate" @change="handleSelectDate" />
      </view>

      <Empty v-if="isEmpty(doctorList)">
        <template #empty-text>
          暂无医生出诊
        </template>
      </Empty>

      <DoctorCard v-for="item in doctorList" :key="item.doctorId" :doctor-item="item" @select="handleSelect(item)" />
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '预约挂号',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.doctor-list {
  background-color: var(--bg-color);
  height: 100%;

  .search {
    .search-type {
      border: 2px solid rgba(255, 255, 255, 0.5);
      background: rgba(247, 250, 254, 0.5);
      font-size: 30px;
      color: rgba(0, 0, 0, 0.88);
      border-radius: 10px;
      padding: 13px 32px;
      &:last-child {
        margin-left: 20px;
      }
      &.active {
        color: var(--primary);
        font-size: 30px;
        font-weight: 800;
        background: #ffffff;
        border-color: #fff;
      }
    }
  }
  .search-date {
    color: var(--text-color);
    font-size: 30px;
  }
}
</style>
